<template>
  <div class="view-wrapper">
    <n-tabs
      size="small"
      class="tabs"
      type="segment"
      animated
      @update:value="handleMapTap"
    >
      <n-tab-pane display-directive="show" class="pane" name="map" tab="地图">
        <mapboxPanel></mapboxPanel>
      </n-tab-pane>
      <n-tab-pane display-directive="if" name="json" tab="JSON">
        <JsonViewer @change="handleJsonChange" :data="geojsonData"></JsonViewer>
      </n-tab-pane>
      <n-tab-pane display-directive="if" name="table" tab="表格">
        我这辈子最疯狂的事，发生在我在 Amazon
        当软件工程师的时候，故事是这样的：<br /><br />
        那时我和女朋友住在一起，正在家里远程工作。忽然同事给我发来了紧急消息：”我们的服务出现了
        SEV 2 级别的故障！需要所有的人马上协助！“我们组的应用全挂掉了。<br /><br />
        当我还在费力的寻找修复方法的时候，忽然闻到隔壁房间的的焦味，防火报警器开始鸣叫。
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import mapboxPanel from "@/pages/editor/components/center-panel/index.vue";
import JsonViewer from "../json.vue";
import { useEventBus } from "@vueuse/core";
import { useMessage } from "naive-ui";

const mapBus = useEventBus("map");
const geojsonBus = useEventBus("geojson");
const configBus = useEventBus("config");
const message = useMessage();
import { updateFile } from "@/api";
const geojsonData = ref<any>({});
const props = defineProps({
  src: String,
});
const eventMap = {
  save(e: any) {
    if (e.properties) {
      geojsonData.value.properties = e.properties;
    }
    console.log(geojsonData.value);
    const path = decodeURI(props.src).split(
      "http://rcs-bucket.oss-cn-hangzhou.aliyuncs.com/"
    )[1];
    const name = path.split("/").pop();
    const stringData = JSON.stringify(geojsonData.value);
    // dada 表示要转换的字符串数据，type 表示要转换的数据格式
    const blob = new Blob([stringData], {
      type: "application/json",
    });
    const file = new File([blob], name, { type: blob.type });
    console.log(path, name);
    // updateFile({})
    const form = new FormData();
    form.append("file", file);
    form.append("path", path);
    updateFile(form)
      .then((res) => {
        console.log(res);
        message.success("保存成功");
      })
      .catch((e) => {
        message.error("保存失败");
      });
  },
};
geojsonBus.on((e: any) => {
  if (eventMap[e.type]) {
    eventMap[e.type](e);
  }
});
onMounted(() => {
  fetch(props.src + "?time=" + new Date()).then((res) =>
    res.json().then((data) => {
      geojsonData.value = data;
      configBus.emit({
        type: "properties",
        value: data.properties,
      });
      mapBus.emit({ type: "render.geojson", value: data, id: "main" });
      if (geojsonData.value.properties && geojsonData.value.properties.zoom) {
        setTimeout(() => {
          mapBus.emit({
            type: "jumpTo",
            value: {
              center: geojsonData.value["properties"]["center"],
              zoom: geojsonData.value["properties"]["zoom"],
            },
          });
        });
      }
    })
  );
});
const handleJsonChange = (data) => {
  // alert();
  geojsonData.value = data;
  geojsonBus.emit({ type: "save" });
};
const handleMapTap = (e) => {
  console.log(e);
  if (e == "map") {
    // setTimeout(() => {
    //   mapBus.emit({
    //     type: "render.geojson",
    //     value: geojsonData.value,
    //     id: "main",
    //   });
    //   setTimeout(() => {
    //     mapBus.emit({
    //       type: "jumpTo",
    //       value: {
    //         center: geojsonData.value["properties"]["center"],
    //         zoom: geojsonData.value["properties"]["zoom"],
    //       },
    //     });
    //   });
    // }, 1000);
  }
  // alert();
  // mapBus.emit({ type: "resize" });
};
</script>

<style lang="scss" scoped>
.view-wrapper {
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  //   background-color: #fff;
  position: relative;
}
.pane {
  width: 100%;
  height: 100%;
}
.tabs {
  width: 100%;
  height: 100%;
}
:deep() {
  .n-tabs-pane-wrapper {
    height: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 12px;
  }
  .n-tabs.n-tabs--top .n-tab-pane {
    padding: 0 !important;
    height: 100%;
  }
}
</style>
